<template>
  <div v-if='model'>
    <div class="topbar d-flex py-2 px-2 border-bottom">
      <i class="iconfont icon-Back text-blue"></i>
      <div class="flex-1 text-blue fs-xs">{{model.title}}</div>
      <div class="fs-xxs text-gray">{{model.createdAt | date}}</div>
    </div>
    <div v-html="model.body" class="px-2 body"></div>
    <div class="border-top px-2 pt-2">
      <div class="d-flex ai-center">
        <i class="iconfont icon-menu1 fs-xl"></i>
        <div class="text-blue ml-2">相关资讯</div>
      </div>
      <router-link :to='`/article/${item._id}`' tag="div" v-for="item in model.about" :key='item.id'>
        <div class="pt-2">{{item.title}}</div>
      </router-link>
      <p>
        <br>
      </p>
      <p>
        <br>
      </p>
      <p>
        <br>
      </p>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  filters: {
    date(val) {
      return dayjs(val).format("MM/DD");
    },
  },
  props: {
    id: {},
  },
  watch: {
    id() {
      this.fetchArticle();
    },
  },
  data() {
    return {
      model: null,
    };
  },
  methods: {
    // 获取文章详情
    async fetchArticle() {
      const res = await this.$http.get(`/article/${this.id}`);
      this.model = res.data;
    },
  },
  created() {
    this.fetchArticle();
  },
};
</script>

<style lang="scss">
.body {
  img {
    width: 100%;
    height: auto;
  }
}
</style>